<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="globalData.title"
    :visible.sync="isDialog.visible"
    top="7vh"
    width="900px"
  >
    <div class="header-box"></div>

    <div class="flex-content">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基础信息" name="normal">
          <el-form label-position="right" label-width="auto">
            <div class="header">
              <div class="title"></div>
              <div class="conent">
                <el-button
                  v-if="dataInfo.operate.isShowRefund === 1"
                  size="mini"
                  type="primary"
                  @click="handleRefund"
                >
                  退款
                </el-button>
                <el-button
                  v-if="dataInfo.operate.isShowFahuo === 1"
                  size="mini"
                  type="primary"
                  @click="handleDeliver()"
                >
                  发货
                </el-button>
              </div>
            </div>

            <el-form-item label="订单号">
              <div class="flex">
                <el-input
                  v-model="dataInfo.info.order_sn"
                  disabled
                  type="text"
                ></el-input>
              </div>
            </el-form-item>

            <el-form-item label="支付方式">
              <el-input
                v-model="dataInfo.info.pickup_method"
                disabled
                type="text"
              ></el-input>
            </el-form-item>

            <el-form-item v-if="dataInfo.info.remark" label="备注">
              <el-input
                v-model="dataInfo.info.remark"
                disabled
                type="text"
              ></el-input>
            </el-form-item>

            <div v-if="dataInfo.info.receiving_information" class="header">
              <div class="title">地址信息</div>
              <div class="conent">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleCopy(dataInfo.info.receiving_information)"
                >
                  复制
                </el-button>
              </div>
            </div>

            <div v-if="dataInfo.info.receiving_information" class="address">
              <el-form-item class="linkman" label="联系人">
                <el-input
                  v-model="dataInfo.info.receiving_information.linkman"
                  disabled
                  type="text"
                ></el-input>
              </el-form-item>

              <el-form-item class="contact" label="联系方式">
                <el-input
                  v-model="dataInfo.info.receiving_information.contact"
                  disabled
                  type="text"
                ></el-input>
              </el-form-item>

              <el-form-item class="info" label="地址">
                <el-input
                  v-model="dataInfo.info.receiving_information.address"
                  disabled
                  type="text"
                ></el-input>
              </el-form-item>
            </div>
            <div
              v-if="dataInfo.info.express_delivery_information"
              class="header"
            >
              <div class="title">物流信息</div>
              <div class="conent">
                <el-button
                  v-if="dataInfo.operate.isShowExpressEdit === 1"
                  size="mini"
                  type="primary"
                  @click="handleEdit()"
                >
                  修改
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="
                    handleCopy(dataInfo.info.express_delivery_information)
                  "
                >
                  复制
                </el-button>
              </div>
            </div>

            <div
              v-if="dataInfo.info.express_delivery_information"
              class="express"
            >
              <el-form-item class="expressCompany" label="物流公司">
                <el-input
                  v-model="
                    dataInfo.info.express_delivery_information.expressCompany
                  "
                  disabled
                  type="text"
                ></el-input>
              </el-form-item>

              <el-form-item class="expressNumber" label="物流单号">
                <el-input
                  v-model="
                    dataInfo.info.express_delivery_information.expressNumber
                  "
                  disabled
                  type="text"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="订单清单" name="contract">
          <el-table :data="dataInfo.orderItem" style="height: 100%">
            <el-table-column align="center" label="商品图片" width="125">
              <template v-slot="{ row }">
                <el-image
                  :preview-src-list="[row.goods_picture_path]"
                  :src="row.goods_picture_path"
                  class="image-box"
                >
                  <div slot="error" class="image-slot">
                    <img alt="没有图片" src="@/assets/imgs/error-img.png" />
                  </div>
                </el-image>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="商品名称"
              prop="goods_name"
              width="250"
            >
            </el-table-column>

            <el-table-column
              align="center"
              label="商品规格"
              prop="spec_name"
              width="150"
            >
            </el-table-column>

            <el-table-column align="center" label="成交价" prop="final_price">
            </el-table-column>

            <el-table-column align="center" label="下单数量" prop="buyNum">
            </el-table-column>

            <el-table-column align="center" label="支付信息" prop="subtotal">
              <template v-slot="{ row }">
                {{ row.payInfo }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="订单日志" name="log">
          <el-table :data="dataInfo.orderLog" style="height: 100%">
            <el-table-column align="center" label="内容" prop="content">
            </el-table-column>

            <el-table-column align="center" label="创建时间" prop="create_time">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <!-- 添加与修改-->
      <Edit v-if="isDialog.edit" :info="orderInfo" @close="closeDialog"></Edit>
      <!-- 退款-->
      <Refund
        v-if="isDialog.refund"
        :info="dataInfo"
        @close="closeDialog"
      ></Refund>
      <!-- 详情-->
      <Express
        v-if="isDialog.express"
        :info="dataInfo.info"
        @close="closeDialog"
      ></Express>
    </div>
  </el-dialog>
</template>

<script>
import { info } from "@/api/order";
import Edit from "@/views/Mall/MallOrder/components/editExpress.vue";
import Refund from "@/views/Mall/MallOrder/components/refund.vue";
import Express from "@/views/Mall/MallOrder/components/changeExpress.vue";

export default {
  name: "Info",
  components: {
    Express,
    Edit,
    Refund,
  },
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      // 选中
      activeName: "normal",
      // 详情
      dataInfo: {},
      // 物流
      orderInfo: {},
      // 统计
      dataList: [],
      // 数据
      globalData: {
        title: "",
      },
      // 弹窗
      isDialog: {
        visible: true,
        edit: false,
        refund: false,
        express: false,
      },
    };
  },
  created() {
    this.getData();
    this.globalData.title = "查看详情" + "( " + this.info.order_sn + ")";
  },
  methods: {
    // 详情
    getData() {
      info({
        order_id: this.info.order_id,
      }).then((res) => {
        this.dataInfo = res.data;
      });
    },
    // 编辑
    handleEdit() {
      this.orderInfo = {
        order_sn: this.dataInfo.info.order_sn,
        order_id: this.dataInfo.info.order_id,
        express_delivery_information:
          this.dataInfo.info.express_delivery_information,
      };
      this.isDialog.edit = true;
    },
    // 退款
    handleRefund() {
      this.isDialog.refund = true;
    },
    // 配送
    handleDeliver() {
      this.isDialog.express = true;
    },
    // 复制
    handleCopy(row) {
      let arr = Object.values(row);
      this.str = arr.join(",");
      const transfer = document.createElement("input");
      document.body.appendChild(transfer);
      transfer.value = this.str; // 这里表示想要复制的内容
      transfer.focus();
      transfer.select();
      if (document.execCommand("copy")) {
        document.execCommand("copy");
      }
      transfer.blur();
      this.$message({
        message: "复制成功",
        type: "success",
      });
      document.body.removeChild(transfer);
    },
    //关闭
    closeDialog(val) {
      if (!val) {
        this.getData();
      }
      this.isDialog.edit = false;
      this.isDialog.refund = false;
      this.isDialog.express = false;
    },
    // 关闭
    handleClose() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 0 20px 20px 20px;
}

.header-box {
  display: flex;

  > div {
    margin-right: 10px;
  }
}

.flex-content {
  margin-top: 10px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .title {
      font-size: 18px;
      font-weight: bold;
    }
  }

  .address,
  .express,
  .stationmaster {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 40px;

    .linkman,
    .name {
      grid-column: 1 / 2;
    }

    .contact {
      grid-column: 2 / 3;
    }

    .info {
      grid-column: 1 / 3;
    }
  }
}
</style>
